<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>表格操作</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <table id="myTable">
      <!-- 表格内容会通过 JavaScript 动态渲染 -->
    </table>

    <!-- 添加获取数据按钮 -->
    <button onclick="printTableData()">获取表格数据</button>

    <div id="contextMenu" class="context-menu">
      <div onclick="tableFunctions.mergeCells()">合并单元格</div>
      <div onclick="tableFunctions.splitCell()">拆分单元格</div>
      <div onclick="tableFunctions.insertColumnRight()">向右插入1列</div>
      <div onclick="tableFunctions.insertRowBelow()">向下插入1行</div>
      <div onclick="tableFunctions.removeColumn()">删除当前列</div>
      <div onclick="tableFunctions.removeRow()">删除当前行</div>
    </div>

    <script src="mock/tableData.js"></script>
    <script>
      // 使用测试数据中的某一组数据作为初始数据
      const initTableData = mockData.basic; // 可以换成其他测试数据
      // const initTableData = mockData.horizontalMerge;
      // const initTableData = mockData.verticalMerge;
      // const initTableData = mockData.irregularMerge;
      // const initTableData = mockData.complexMerge;
      console.log('initTableData', JSON.stringify(initTableData, null, 2));


      // 添加打印表格数据的函数
      function printTableData() {
        const table = document.getElementById('myTable');
        const data = tableData.getTableData(table);
        console.log('表格数据:', data);
        console.log('JSON格式:', JSON.stringify(data, null, 2));
      }
    </script>

    <script src="js/tableState.js"></script>
    <script src="js/tableSelection.js"></script>
    <script src="js/tableFunctions.js"></script>
    <script src="js/contextMenu.js"></script>
    <script src="js/tableData.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>
